<!-- 账号管理 -->
<template>
  <div class="account-container">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="customerNo" label="客户编号" width="100" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="wechatNo" label="微信号" width="180" />
      <el-table-column prop="phone" label="手机号" width="150" />
      <el-table-column prop="registerTime" label="注册时间" width="180" />
      <el-table-column prop="lastLoginTime" label="最后登录时间" width="180" />
      <el-table-column prop="amount" label="金额" width="120" />
      <el-table-column prop="rebateRatio" label="返佣比例" width="120" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleView(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="pagination.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';

const tableData = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// 模拟接口地址
const apiUrl = '/api/accounts';

const getAccounts = async (params) => {
  try {
    const response = await axios.get(apiUrl, { params });
    return response.data;
  } catch (error) {
    console.error('获取账号列表失败:', error);
    return { data: [], total: 0 };
  }
};

const fetchAccounts = async () => {
  const { data, total } = await getAccounts({
    page: pagination.currentPage,
    limit: pagination.pageSize
  });
  tableData.value = data;
  pagination.total = total;
};

fetchAccounts();

const handleSizeChange = (pageSize) => {
  pagination.pageSize = pageSize;
  fetchAccounts();
};

const handleCurrentChange = (currentPage) => {
  pagination.currentPage = currentPage;
  fetchAccounts();
};

const handleView = (row) => {
  // 处理查看逻辑，例如导航到详情页
  console.log('查看账号:', row);
};
</script>

<style scoped>
.account-container {
  padding: 20px;
}
</style>